<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作品讨论区</title>
    <link rel="stylesheet" href="../static/css/search.css">
    <script type="text/javascript" src="/static/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        #backimg{
            display:none;
        }
        #aurs{
            color:black
        }
    </style>
    <script type="application/javascript">
        $(document).ready(function(){
            s=$("#myul").children()
            if (s.length==0){
                $("#backimg").show()
            }
        })
    </script>
</head>
<body>
<div id="container">
    <header>
        <iframe id="myframe" src="/Header/" width="1200px" FRAMEBORDER="0" height="130px">
        </iframe>
    </header>
    <div>
    </div>
    <div id="info">

        <ul id="myul">
            {% for row in contacts %}

                    <li>
                        <div>
                            <a href="/Details/?book_id={{ row.book_id }}" ><img src="{{ row.book_image }}" alt=""></a>
                        </div>
                        <div class="info_container_info">
                            <a href="/Details/?book_id={{ row.book_id }}" style="color: black;"><h4 style="width: auto">{{ row.book_name }}</h4></a>
                            <p class="author">
                                <a id="aurs"href="/author/?user_id={{ row.user_id }}">{{ row.user_name }}</a>
                                <em>|</em>
                                <span>{{ row.kind_name }}</span>
                                <em>|</em>
                                <span>{{ row.book_state }}</span>
                            </p>
                            <p class="intro">
                                {{ row.book_introduction }}
                            </p>
                        </div>
                        <div class="bookbox">
                            <div class="count">
                                <p>{{ row.book_words }}<span>字数</span></p>
                            </div>
                            <div class="button">
                                <div class="redbutton"><p><a href="/Details/?book_id={{ row.book_id }}">书籍详情</a></p>
                                </div>
                            </div>
                        </div>
                    </li>

            {% endfor %}
        </ul>
    </div>
    {% if contacts.paginator.num_pages > 1 %}
                <div class="page-box-cf">
                    <div class="pagation">
                        <div class="lbf">
                            <ul class="lbf-list">
                                {% if contacts.has_previous %}
                                    <li>
                                        <a href="?keys={{ name }}&page=1" style="color:black">首页</a>
                                    </li>
                                    <li class="lbf-item"><a
                                            href="?keys={{ name }}&page={{ contacts.previous_page_number }}"
                                            class="lbf-bf1"><</a></li>
                                {% endif %}
                                {% if  start_index >= 1 %}
                                    <li>...</li>
                                {% endif %}
                                {% for pg in page_range %}
                                    {% if contacts.number == pg %}
                                        <li class="btn btn-default"
                                            style="font-size:25px;font-weight:bold;color:lawngreen;line-height:20px;">{{ pg }}</li>
                                    {% else %}
                                        <li>
                                            <a href="?keys={{ name }}&page={{ pg }}"
                                               class="btn">{{ pg }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if end_index  < contacts.paginator.num_pages %}
                                    <li>...</li>
                                {% endif %}
                                {% if contacts.has_next %}
                                    <li class="lbf-item"><a
                                            href="?keys={{ name }}&page={{ contacts.next_page_number }}"
                                            class="lbf-bf1">></a></li>
                                    <li>
                                        <a href="?keys={{ name }}&page={{ contacts.paginator.num_pages }}" style="color:black">尾页</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>
            {% endif %}
    <div id="backimg">
                <img id="imgsd" src="/static/image/nonebook.PNG"/>
            </div>
</div>
</body>
</html>